<template>
  <view class="page">
		<!-- header 开始 -->
		<view class="header">
			<!-- locationName 开始 -->
			<view class="locationName">
				<uni-icons type="Email" size="18" color="red"></uni-icons>
				<text>搜索</text>
			</view>
			<!-- locationName 结束 -->
			<!-- 搜索框开始 -->
			<view class="uni-search-bar">
				<uni-search-bar placeholder="搜索医生或医疗机构" cancel-button="none" radius="100"/>
			</view>
			<!-- 搜索框结束 -->
		</view>
		<!-- header 结束 -->
		<!-- 首页分类开始 -->
		<view class="classify_wrap">
			<!-- 横向分类滚动开始 -->
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					<view class="segmented-wrap">
						<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
					</view>
				</scroll-view>
			</view>
			<!-- 横向分类滚动结束 -->
			<!-- 分类 icon 开始 -->
			<view class="classify_icon">
				<uni-icons type="list" size="28" color="gray"></uni-icons>
			</view>
			<!-- 分类 icon 结束 -->
		</view>
		<!-- 首页分类结束 -->
		<!-- 轮播图开始 -->
				<view class="uni-margin-wrap">
							<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
								<view v-if="error">{{error.message}}</view>
								<view v-else>
									<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
										:duration="duration">
										<swiper-item v-for="(item, index) in data" :key="item._id">
											<view class="swiper-item">
												<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
											</view>
										</swiper-item>
									</swiper>
								</view>
							</unicloud-db>
						</view>
		<!-- 轮播图结束 -->
		<view class="content">
			<view v-if="current === 0">
				<!-- 医疗服务开始 -->
				<view class="vip-wrap">
					<uni-card title="医疗服务" :thumbnail="vipIcon" margin="5px">
						<uni-grid :column="column" :show-border="false" :square="false">
							<uni-grid-item v-for="(item, index) in vipItem">
								<view class="grid-item-box">
									<image :src="item.icon" style="width: 60rpx; height: 60rpx;" mode="aspectFill"></image>
									<text>{{ item.text }}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-card>
				</view>
				<!-- 医疗服务结束 -->
				<!-- 服务列表开始 -->
				<view class="serviceList">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctorSchema">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<uni-list>
								<uni-list-item v-for="(item, index) in data" :title="item.bookName" :note="item.author"></uni-list-item>
							</uni-list>
						</view>
					</unicloud-db>
				</view>
				<!-- 服务列表结束 -->
			</view>
			<view v-show="current  === 0">
				<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctorSchema">
					<view v-if="error">{{error.message}}</view>
					<view v-else>
						<uni-list>
							<uni-list-item v-for="(item, index) in data">
							  <template v-slot:header>
							    <view class="slot-box">
							      <image class="slot-image" :src="item.Image.url" mode="widthFix"></image>
							    </view>
							  </template>
							    <template v-slot:body>
							      <view class="doctorName">
							        <text>名字 | {{ item.doctorName }}</text>
							      </view>
							      <view class="classify">

							        <text>科室 | {{ item.classify }}</text>
							      </view>
							    </template>
							</uni-list-item>
						</uni-list>
					</view>
				</unicloud-db>
			</view>
			<view v-show="current === 1">
				<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctorSchema">
					<view v-if="error">{{error.message}}</view>
					<view v-else>
						<uni-list>   
							<uni-list-item v-for="(item, index) in data">
							  <template v-slot:header>
							    <view class="slot-box">
							      <image class="slot-image" :src="item.Image.url" mode="widthFix"></image>
							    </view>
							  </template>
							    <template v-slot:body>
							      <view class="doctorName">
							        <text>名字 | {{ item.doctorName }}</text>
							      </view>
							      <view class="classify">
				
							        <text>科室 | {{ item.classify }}</text>
							      </view>
							    </template>
							</uni-list-item>
						</uni-list>
					</view>
				</unicloud-db>
			</view>
		</view>
	</view>
</template>


<script>
  export default {
    data() {
      return {
		classify:["骨科","心血管科","胸外科","内分泌科","儿科"],
		current: 0,
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500,
		column: 3,
		vipIcon: '/static/picture/medicalservice.png',
		vipItem: [
			{text: '门诊缴费', icon: '/static/picture/service.png'},
			{text: '历次就诊', icon: '/static/picture/history.png'},
			{text: '报告查询', icon: '/static/picture/report.png'}
		],
      }
    },
    methods: {
	  onClickItem(e) {
		if (this.current !== e.currentIndex) {
		  this.current = e.currentIndex
		}
	  },
    }
  }
</script>

<style scoped>
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	.page{
		background-color: #EEEEEE;
	}
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px
	}
	.uni-search-bar{
		width: 580rpx;
		height: 50px;
	}
	.classify_wrap {
		width: 750rpx;
		display: flex;
		flex-direction: row;
	}
	.classify_scroll_x{
		white-space: nowrap;
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
	}
	.classify_icon{
		display: flex;
		flex: 1;
		background-color: #FFFFFF;
		margin-left: 3rpx;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
		justify-content: center;
		text-align: center;
	}
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.segmented-wrap{
		width: 1200rpx;
	}
	.uni-margin-wrap{
		margin-top: 5rpx;
	}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	.grid-item-box {
		text-align: center;
		justify-content: center;
		padding: 20rpx 0 0 0;
	}
	.grid-item-box image{
		margin: 0 auto;
	}
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}

	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.doctorName{
		font-size: 30rpx;
		display: -webkit-box;
		line-height: 1.5em;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 5rpx;
	}
	.Image{
		font-size: 24rpx;
		white-space: nowrap; 
		overflow: hidden; 
		text-overflow: ellipsis; 
		word-break: break-all; 
		margin-bottom: 10rpx;
		color: #666666;
	}
	.classify {
		display: flex;
		flex-direction: row;
		line-height: 40rpx;
	}
	.brief{
		font-size: 40rpx;
		color: #000000;
	}
	.bookPrice{
		font-size: 24rpx;
		color: #AAAAAA;
		text-decoration-line: line-through;
	}
</style>